ホームページでは、フォームを使用することにより手軽にボタンを作成することができます。作成されたボタン内の文字は、value属性を設定することにより自由に変更することも可能です。では、「文字ではなく画像でボタンを作成したい」という場合はどのようにしたらよいのでしょう? 今回は、フォームのボタンを画像にする方法などを紹介してみたいと思います。

→
 
通常、フォームを使ってボタンを作成する場合は、INPUTタグを記述し、type属性の値を「button」とします。このType属性の値を「image」に変更し、src属性で画像ファイルの位置とファイル名を指定してやると、文字ではなく画像のボタンを作成することが可能となります。ホームページに表示された画像ボタンは普通の画像表示と見た目の変化はありませんが、フォームの一部としてボタンと同じ役割をもたせることができます。
※下の画像をクリック!
<form>
<input type="image" src="./kao.gif"
onClick="alert('また合いましたね。こんにちは!!')">
</form>
この例では「kao.gif」というファイルが、画像ではなくフォームボタンとして機能しています。なおonClick以降の記述は、画像ボタンをクリックした際に「また合いましたね。こんにちは!!」というアラートを表示させる機能となります。


→
 
上の手順により作成された画像ボタンは、通常の画像と同様に、文字を回り込ませることも可能となっています。これはINPUTタグにより作成された画像ボタンに、align属性を追加する事により実現します。align属性に指定できる値は、「top」(上揃え)、「middle」(中央揃え)、「bottom」(下揃え)、「left」(画像の右に文字を回り込ませる)、「right」(画像の左に文字を回り込ませる)の5種類です。
※下の画像をクリック!
<form>
<input type="image" src="./kao.gif" align="left"
onClick="alert('また合いましたね。こんにちは!!')">
このようにテキストを<BR>
回り込ませるように<BR>
設定することもできます。
</form>


→
 
最後に、画像ボタンと似たようなテクニックをひとつ紹介しておきましょう。それは、画像や文字をボタンの中に配置するというものです。HTMLにはBUTTONというタグが用意されており、BUTTONタグ 〜 /BUTTONタグの間に記述された内容すべてを、ひとつのボタン内に表示させることができるようになっています。もちろん、onClickイベントなどを追加すればボタン全体に特定の機能をもたせること可能です。これは、あまり見かけない表現方法ですので、効果的なワンポイントとなるかもしれません。試してみて下さい。
<BUTTON type="button"
onClick="alert('また合いましたね。こんにちは!!')">
<IMG src="./kao.gif">
<BR>
このボタンをクリック!
</BUTTON>

yVoC[UNLIMIT1~] ECir|C Yahoo yV LINEf[^[z500~`I


z[y[W NWbgJ[h COiq O~yz COsI COze